<template>
  <view>
    <user-info />
    <UserContent
      @enterCategory="enterCategory"
      v-if="!currentItem.catId"
      ref="userContent"
    />
    <view v-if="currentItem.catId" class="btn_wrap">
      <u-button
        :custom-style="customStyle"
        type="success"
        @click="clearCurrentItem"
        >返回</u-button
      >
    </view>
    <Details v-if="currentItem.catId" :currentItem="currentItem" />
    <u-modal v-model="isShow" content="目前为体验模式哦" title="用户提示"></u-modal>
    <view class="empty_wrap" v-if="!isLogin">
      <u-empty
        text="当前处于游客模式"
        mode="permission"
      ></u-empty>
    </view>
  </view>
</template>

<script>
import userInfo from '../userInfo/index.vue'
import UserContent from '../userInfo/UserContent.vue'
import Details from '../userInfo/Details.vue'
export default {
  data() {
    return {
      currentItem: {},
      customStyle: {
        border: 'solid 1px #fa7498',
        color: '#fa7498',
        background: 'transparent',
      },
      isLogin: false,
      isShow:true
    }
  },
  components: {
    userInfo,
    UserContent,
    Details,
  },
  methods: {
    enterCategory(item) {
      // if (this.isLogin) {
      //   this.currentItem = item
      // } else {
      //   uni.showToast({
      //     title: '请先登录哟~',
      //     icon: 'none',
      //   })
      // }
      this.currentItem = item
    },
    clearCurrentItem() {
      this.currentItem = {}
    },
  },
  onLoad() {
    uni.getStorage({
      key: 'userInfo',
      success: (res) => {
        if (res.data.nickName) {
          this.isLogin = true
          this.isShow = false
        }
      },
      fail:(err=>{
        console.log(err.message);
      })
    })
    uni.$on('successLogin', (flag) => {
      this.isLogin = flag
      this.$refs.userContent.getMenus()
    })
  },
}
</script>

<style lang="scss" scoped>
.btn_wrap {
  width: 30%;
  height: 100rpx;
  padding: 28rpx 30rpx 10rpx 30rpx;
  display: flex;
  align-items: center;
}
.empty_wrap{
  margin-top: 10%;
}
</style>
